<template>
  <NavBar title="购物车" />
  <div>
    <div class="action-bar">
      <span>数量: {{ number }}</span>
      <span @click="toggleManagerStatus">
        {{ managerStatus ? '取消' : '管理' }}
      </span>
    </div>
    <div class="content">
      <div class="items">
        <div class="item" v-for="item in items" :key="item.goodsId">
          <van-checkbox v-model="item.selected" @change="changeItemSelect(item.key, item.selected)" />
          <van-card :num="item.number" :price="item.price" :title="item.name" :thumb="item.pic">
            <template #footer>
              <van-stepper v-model="item.number" @change="changeItemNum(item.key, item.number)" />
            </template>
          </van-card>
        </div>
      </div>
    </div>
    <!-- 提交订单栏 -->
    <van-submit-bar :price="(total * 100)" @submit="onSubmit">
      <van-checkbox v-model="allChecked">全选</van-checkbox>
      <template #button>
        <div>
          <van-button v-if="!managerStatus" size="small" type="danger" round>提交订单</van-button>
          <van-button size="small" v-if="managerStatus" @click="delItem">删除</van-button>
        </div>
      </template>
    </van-submit-bar>
    <!-- 提交订单栏  -->
  </div>
</template>

<script setup lang="ts">
import NavBar from '@c/NavBar.vue'
import {
  fetchCartInfo, modifyCartNum,
  removeCartItem,
  modifyCartItemSelected
} from '@a/index'
import { useRouter } from 'vue-router';
import { ref, onMounted, computed } from 'vue'


// 管理状态 做批量删除
const managerStatus = ref<boolean>(false)
// 点击管理按钮 显示删除
const toggleManagerStatus = () => {
  managerStatus.value = !managerStatus.value
}

// 点击商品复选框修改商品选中状态
const changeItemSelect = (key: string, selected: boolean) => {
  modifyCartItemSelected({
    key,
    selected
  }).then(res => {
    if (res.data.code === 0) {
      items.value = res.data.data.items;
      number.value = res.data.data.number;
      total.value = res.data.data.price;
    }
  })
}

// 删除购物车商品
const delItem = () => {
  const checkedItems = items.value.filter(item => item.selected);
  const keys: any[] = []
  checkedItems.forEach(item => {
    keys.push(item.key)
  })
  removeCartItem({
    key: keys.join(',')
  }).then(res => {
    if (res.data.code === 0) {
      items.value = res.data.data.items;
      number.value = res.data.data.number;
      total.value = res.data.data.price;
    }
    if (res.data.code === 700) {
      items.value = [];
      number.value = 0;
      total.value = 0;
    }
  })
}

// 修改商品购买数量
const changeItemNum = (key: string, num: number) => {
  modifyCartNum({
    key,
    number: num
  }).then(res => {
    if (res.data.code === 0) {
      items.value = res.data.data.items;
      number.value = res.data.data.number;
      total.value = res.data.data.price;
      // localStorage.setItem('num', number.value)
    }

  })
}



// 获取购物车数据
const items = ref<any[]>([]); // 商品
const number = ref<number>(0); // 总件数
const total = ref<number>(0); // 总价格
// 全选状态基于商品 单个选中状态计算
const allChecked = computed({
  get() {
    return items.value.every(item => item.selected)
  },
  set(val) {
    // 点击全选修改所有商品选中状态
    // 将所有商品选中状态都变成 全选的状态 
    // 发请求
    const keys: string[] = []
    items.value.forEach(item => {
      keys.push(item.key)
    })
    modifyCartItemSelected({
      key: keys.join(','),
      selected: val
    }).then(res => {
      if (res.data.code === 0) {
        items.value = res.data.data.items;
        number.value = res.data.data.number;
        total.value = res.data.data.price;
      }
    })
  }
})
const getCartInfo = () => {
  fetchCartInfo().then(res => {
    if (res.data.code === 0) {
      items.value = res.data.data.items;
      number.value = res.data.data.number;
      total.value = res.data.data.price;
      localStorage.setItem('num', res.data.data.number)
    }
  })
}
// 提交订单
const onSubmit = () => { }
onMounted(() => {
  getCartInfo()
})
</script>

<style lang="scss" scoped>
.action-bar {
  height: 40px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333;
  font-size: 14PX;
  padding: 0 10px;
  position: fixed;
  width: 100%;
  left: 0;
  top: 40px;
  z-index: 10;
}

.content {
  padding-bottom: 100px;
  padding-top: 80px;

  .item {
    display: flex;
    background-color: #fff;
    margin-top: 5px;

    .van-checkbox {
      margin: 0 5px;
    }

    .van-card {
      flex: 1;
      background-color: #fff;
    }
  }
}
</style>